<div class="bg">
  <div class="container">
    <div class="panel-deposit df jcsb">
      <mat-card class="panel-info">
        <mat-card-title class="df" style="display:flex"
          ><i
            style="outline:none"
            [routerLink]="['/assets/lists']"
            class="icon iconfont"
            >&#xe616;</i
          >
          {{ "assets.deposit" | translate: lang }}</mat-card-title
        >
        <mat-card-content>
          <div class="select" style="width:200px;margin-top: -3px;">
            <app-coin-select
              (onChange)="onChangeCoin($event)"
            ></app-coin-select>
          </div>
          <div class="info">
            <div class="i df">
              <div class="l">{{ "assets.frozen" | translate: lang }}</div>
              <div class="r">{{ assets.frozen }}</div>
            </div>
            <div class="i df">
              <div class="l">{{ "assets.ava" | translate: lang }}</div>
              <div class="r">{{ assets.ava }}</div>
            </div>
          </div>
        </mat-card-content>
        <mat-card-content
          style="margin-top: 21px;
            margin-bottom: 12px;"
        >
          <i class="icon iconfont" style="color:#F7931A;margin:10px 0;">
            &#xe612;
          </i>
        </mat-card-content>
        <mat-card-content
          [params]="{
            min: assets.deposit.min,
            confirm: assets.deposit.confirm,
            coin: assets.coin
          }"
          l10nTranslate
          style="font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #EDA007;
            letter-spacing: -0.29px;width:421px;height:92px;line-height: 24px;"
        >
          assets.deposit_tip
        </mat-card-content>
        <!-- Please don't deposit any other digital assets except BTC to the above
          address. Depositing to the above address requires confirmations of the
          entire network. It will arrive after 2 confirmations. Minimum deposit
          amount: 0.001 BTC. It won't be credited less than 0.001 BTC. -->
      </mat-card>

      <mat-card class="panel-code">
        <div class="i input">
          <div class="h">{{ "assets.deposit_address" | translate: lang }}</div>
          <div class="b df jcsb">
            <input
              type="text"
              [formControl]="address"
              placeholder="{{ 'assets.deposit_address' | translate: lang }}"
            />
            <button
              mat-button
              ngxClipboard
              (cbOnSuccess)="onSuccessCopy()"
              [cbContent]="address.value"
              style="height: 45px;width: 80px;"
            >
              <i class="icon iconfont">&#xe614;</i>
              {{ "assets.copy" | translate: lang }}
            </button>
          </div>
        </div>
        <canvas
          #qrcode
          style="width:188px;height:118px;"
          class="qrcode"
          id="qrcode"
        ></canvas>
      </mat-card>
    </div>
    <mat-card>
      <mat-card-title>{{
        "assets.deposit_history" | translate: lang
      }}</mat-card-title>
      <mat-card-content>
        <app-deposit-history [search]="search"></app-deposit-history>
      </mat-card-content>
    </mat-card>
  </div>
</div>
